<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>学生查询结果</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- css -->
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<style>
    .body {
        position: absolute;
        text-align: center;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 12px;
        line-height: 166.6%;
        max-height: 1440px;
        min-width: 1220px;
        min-height: 700px;
        font-family: PingFangSC-Regular, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", verdana, sans-serif, Simsun, STXihei;
        zoom: 1;
    }

    .result {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
        width: 95%;
    }

    h1 {
        margin: 20px;
        color: #009688;
        font-family: PingFangSC-Regular, 方正姚体, "\5FAE\8F6F\96C5\9ED1", verdana, sans-serif, Simsun, STXihei;
    }
</style>

<body>
    <div class="result">
        <h1>学生信息</h1>
        <table class="layui-hide" id="test"></table>
    </div>

    <!-- js -->
    <script src="../layui/layui.js" charset="utf-8"></script>
    <script>
        layui.use('table', function () {
            var table = layui.table;// 表单
            table.render({
                elem: '#test'
                , url: '../js/studata.json'
                , cols: [[
                    { field: 'stu_id', width: 100, title: '学号' }
                    , { field: 'name', width: 90, title: '姓名' }
                    , { field: 'sex', width: 100, title: '性别' }
                    , { field: 'birth', width: 150, title: '生日' }
                    , { field: 'identification', width: 150, title: '身份证号码' }
                    , { field: 'tele_num', width: 100, title: '联系电话' }
                    , { field: 'register', width: 150, title: '登记日期' }
                    , { field: 'useful', width: 150, title: '有效期至' }
                    , { field: 'borrow_num', minWidth: 60, title: '已借图书' }
                ]]
                , page: true
            });
        });
    </script>

</body>

</html>